<template>
  <FPage style="height: calc(100vh - 39px)">
    <template #header>
      <el-form ref="searchForm" class="simple-line-form" inline
               style="padding: 5px" :model="searchParams">
        <el-form-item prop="dictCode" label="编码">
          <el-input v-model="searchParams.dictCode" placeholder="请输入编码"/>
        </el-form-item>

        <el-form-item style="padding-left: 5px" prop="dictName" label="名称">
          <el-input v-model="searchParams.dictName" placeholder="请输入名称"/>
        </el-form-item>

        <el-form-item>
          <el-button style="margin-left: 5px" icon="add" type="primary" round @click="addNew">新建</el-button>
          <el-button style="margin-left: 5px" icon="search" round @click="search">查询</el-button>
          <el-button style="margin-left: 5px" icon="reload" round @click="resetQueryParams">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
              :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
              v-loading="loading">
      <el-table-column show-overflow-tooltip sortable prop="dictCode" label="编码"/>
      <el-table-column show-overflow-tooltip sortable prop="dictName" label="名称"/>
      <el-table-column show-overflow-tooltip label="操作">
        <template #default="{row}">
          <el-button round type="primary" icon="setting"
                     @click.stop="() => configItems(row)">配置</el-button>
          <el-divider direction="vertical" />
          <el-button round type="danger" icon="remove"
                     @click.stop="() => remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div style="padding: 10px; display: flex; justify-content: end">
        <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="pageOptions"
            background layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" small
            @size-change="search"
            @current-change="pageChange"
        />
      </div>
    </template>
    <SysDictEditor @ok="() => search(true)" ref="refSysDictEditor"/>
    <SysDIctItemConfiguration ref="refSysDIctItemConfiguration"/>
  </FPage>
</template>
<script setup>
import FPage from '@/components/layout/FPage.vue';
import {onMounted, ref, shallowRef} from 'vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import {deleteAction, getAction} from '@/request/BaseRequest';
import SysDictEditor from '@/views/plat/app/SysDictConfiguration/SysDictEditor/index.vue';
import {ElMessageBox} from 'element-plus';
import {real} from '@/utils/CommonUtils';
import SysDIctItemConfiguration from '@/views/plat/app/SysDIctItemConfiguration/index.vue';

const refSysDictEditor = shallowRef();
const refSysDIctItemConfiguration = shallowRef();
const searchForm = shallowRef();
const searchParams = ref({});

onMounted(() => {
  search();
})

function doSearch(params) {
  loading.value = true;
  getAction('/plat/platDict/list', params).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}

function onRowClick(row) {
  refSysDictEditor.value.setData(row);
}

function addNew() {
  refSysDictEditor.value.addNew();
}

function onSelection() {

}

function configItems(row) {
  refSysDIctItemConfiguration.value.setData(row);
}

function doRemove(row) {
  loading.value = true;
  deleteAction('/plat/platDict/remove',
    {id: real(row).id}).then(data => {
    loading.value = false;
    if (data.success) {
      search(true);
    }
  });
}

function remove(row) {
  ElMessageBox.confirm('删除后不可恢复, 确定删除吗', {
    draggable: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    doRemove(row);
  }).catch((e) => {
  });
}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: undefined,
    order: undefined,
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});
</script>
<script>
export default {
  name: 'SysDictConfiguration'
};
</script>
<style scoped>

</style>
